﻿/* Entire screen */
body
{
    background-color: #ebe8e8;
}

/* Left and right banner */
#divAdLeft, #divAdRight
{
    display: none;
    position: absolute;
    top: 0;
}

/* Web page */
#web-page
{
    background-color: white;
    margin: 20px auto;
    padding: 25px;
    width: 950px;
    box-shadow: 0 0 5px #808080;
    display: block;
    overflow: auto;
}

/* Header section */
#header
{
}

/* Banner-SubMenu-Login section */
#banner-submenu-login
{
}

/* Banner section */
#banner
{
    float: left;
}

/* SubMenu-Login section */
#submenu-login
{
    float: right;
    width: 400px;
}

/* SubMenu section */
#submenu
{
    float: right;
    height: 48px;
}

#submenu a, #submenu strong
{
    text-decoration: none;
    font-size: small;
    margin-bottom: 20px;
    position: relative;
    top: -30%;
    margin-right: 10px;
}

#submenu strong
{
    margin-left: -10px;
}

#submenu strong span
{
    color: red;
}

/* Login section */
#login
{
    background-color: #f6f3f3;
    padding: 15px;
    width: 300px;
    height: 110px;
    border: 1px solid #cac6c6;
    border-radius: 5px;
    box-shadow: 0 8px 8px -2px #d9d5d5;
    margin-top: 10px;
    float: right;
}

#login .remember
{
    width: 10px;
    height: 10px;
}

/* Username textbox */
#login .username
{
    width: 120px;
    height: 20px;
    margin: 10px 0;
    background-image: url(../Images/Icons/Username.png);
    background-repeat: no-repeat;
    padding-left: 20px;
    box-shadow: inset 0 3px 3px -2px #cac6c6;
    border: 1px solid #cac6c6;
    border-radius: 2px;
}

/* Password textbox */
#login .password
{
    width: 120px;
    height: 20px;
    margin: 10px 0;
    background-image: url(../Images/Icons/Password.png);
    background-repeat: no-repeat;
    padding-left: 20px;
    box-shadow: inset 0 3px 3px -2px #cac6c6;
    border: 1px solid #cac6c6;
    border-radius: 2px;
    float: right;
}

/* Login button */
#login .login-button
{
    float: right;
    background-color: #808080;
    color: white;
}

/* Register section */
#login .register
{
    text-align: center;
    width: 300px;
    display: inline-block;
    margin-top: 5px;
}

/* Solve placeholder issue in Chrome browser */
input:focus::-webkit-input-placeholder
{
    color: transparent;
}

#logout
{
    background-color: #f6f3f3;
    padding: 15px;
    width: 200px;
    height: 50px;
    border: 1px solid #cac6c6;
    border-radius: 5px;
    box-shadow: 0 8px 8px -2px #d9d5d5;
    margin-top: 10px;
    float: right;
}

#logout #buttons
{
    float: right;
    margin-top: 10px;
}

#logout #buttons .logout-button
{
    background-color: #808080;
    color: white;
    text-decoration: none;
    padding: 5px;
    border: 1px solid white;
}

/* MainMenu */
#menu
{
    margin-top: 10px;
    background-color: black;
    width: 950px;
    height: 50px;
    float: left;
    clear: both;
}

/* MainMenu's ul */
#menu ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* MainMenu items */
#menu ul li
{
    float:left;
    display: inline;
    margin-left: 30px;
}

/* MainMenu link */
#menu ul li a
{
    color: #cac7c7;
    text-decoration: none;
    font-weight: bold;
    font-size: medium;
    display: inline-table;
    line-height: 50px;
}

#menu ul li a:hover
{
    color: #e1d22b;
    background-image: url(../Images/Icons/Triangle.png);
    background-position: bottom center;
    background-repeat: no-repeat;
}

.menu-item-activated
{
    background-image: url(../Images/Icons/Triangle.png);
    background-position: bottom center;
    background-repeat: no-repeat;
}

#slideshow
{
    float: left;
    clear: both;
    margin-top: 10px;
}

#slideshow img
{
    border: 1px solid #cac6c6;
}

#content
{    
}

#left-panel
{
    float: left;
}

/* Left-menu in content section */
#left-menu
{
    width: 200px;
    overflow: auto;
    border: 1px solid #5D6B84;
    background: url(../Images/LeftMenu_Background.png) repeat-y;
    margin-top: 20px;
}

/* Dots symbol */
#left-menu .dots
{
    background-image: url(../Images/Dots.png);
    background-position: bottom left;
    background-repeat: repeat-x
}

/* Items in left-menu */
#left-menu ul
{
    float: left;
    margin: 0;
    padding: 0 0 10px 20px;
    list-style-type: none;
}

/* Item in left-menu */
#left-menu li
{
    width: 160px;
    padding: 10px 0 0 0;
}

#left-menu li a
{
    background-image: url(../Images/Arrow.png);
    background-position: left center;
    background-repeat: no-repeat;
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
    color: #555555;
    padding: 0 0 0 10px;
    text-decoration: none;
}

#left-menu li a:hover
{
    color: red;
    background-image: url(../Images/Arrow_Focus.png);
    background-position: left center;
    background-repeat: no-repeat;
}

/* Visitors in content section */
#visitors
{
    width: 200px;
    border: 1px solid #5D6B84;
    background: url(../Images/LeftMenu_Background.png) repeat-y;
    margin-top: 20px;
    float: left;
}

#visitors .item
{
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 10px;
}

#visitors .online-visitors
{
    float: right;
    font-weight: bold;
}

/* Ads in content section */
#ads
{
    width: 200px;
}

#ads img:first-child
{
    margin-top: 20px;
}

#ads img, #ads embed
{
    margin-top: 5px;
}


/* Right-panel in body section */
#main-content
{
    float: right;
    width: 734px;
    margin-top: 20px;
    border: solid 1px #cac6c6;
}

#right-menu
{
}

#primary-content
{
}

#right-menu .product-features
{
    height: 30px;
    background: #ebe8e8;
}

#right-menu .product-features img
{
    float: left;
}

#right-menu .product-features ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-family: Arial;
    font-size: 10px;
}

#right-menu .product-features ul li
{
    float: left;
    display: inline;
    background: url(../Images/ProductFeatures.png) no-repeat;
    margin-left: -15px;
}

#right-menu .product-features ul li a
{
    display: inline-table;
    line-height: 30px;
    width: 140px;
    color: white;
    text-decoration: none;
    padding-left: 20px;
}

.product-features-activated a
{
    background: url(../Images/ProductFeatures_Focus.png) no-repeat;
}

#right-menu .register, #right-menu .product, #right-menu .details
{
    height: 30px;
    background: #ebe8e8;
}

#right-menu .register img, #right-menu .product img, #right-menu .details img
{
    float: left;
}

#right-menu .register p, #right-menu .product p, #right-menu .details p
{
    margin: 0;
    margin-left: -15px;
    display: inline-table;
    line-height: 30px;
    width: 140px;
    color: white;
    text-decoration: none;
    padding-left: 20px;
    background: url(../Images/ProductFeatures_Focus.png) no-repeat;
}

#primary-content .products
{
    margin-top: 10px;
}

#primary-content .register
{
    text-align: center;
    font-size: medium;
}

#primary-content .details
{
    margin-top: 10px;
}

#primary-content .details .zoom
{
    float: left;
    margin-left: 10px;
    margin-right: 20px;
    display: inline-block;
}

#primary-content .details .zoom img:hover
{
    background-color: white;
}

#primary-content .details .zoom-icon
{
    margin-left: 10px;
    margin-bottom: 20px;
    width: 150px;
    text-align: center;
}

#primary-content .details .details-label
{
    font-weight: bold;
    margin-right: 5px;
}

#primary-content .details .name-price
{
    color: red;
    text-transform: uppercase;
}

#primary-content .details .old-price
{
    color: red;
    text-decoration: line-through;
}

#primary-content .details hr
{
    width: 400px;
    margin-left: 0;
}

#primary-content .details a
{
    background-color: #ebe8e8;
    text-decoration: none;
    display: inline-table;
    width: 90px;
    line-height: 30px;
    text-align: center;
    box-shadow: 0 3px 3px -2px #808080;
    font-weight: bold;
    margin-top: 10px;
    color: black;
}

#primary-content .details table
{
    clear: both;
    margin-left: 10px;
    margin-bottom: 10px;
    background-color: #f6f3f3;
    border: none;
    width: 714px;
}

#primary-content .details table td
{
    border: none;
    border-bottom: 1px solid #ebe8e8;
}

#primary-content .details table th
{
    width: 135px;
    border-left: none;
    border-top: none;
    border-right: 1px solid #ebe8e8;
    border-bottom: 1px solid #ebe8e8;
    text-align: left;
}

#primary-content .details table .title
{
    border: none;
    width: 100px;
    color: red;
    background-color: #d9d5d5;
    border-bottom: 1px solid #ebe8e8;
    text-align: center;
}

#primary-content .register ul
{
    list-style-type: none;
    padding: 0;
}

#primary-content .shopping-cart
{
    padding: 10px;
}

#primary-content .shopping-cart table
{
    width: 714px;
    border-collapse: collapse;
}

#primary-content .shopping-cart th
{
    background-color: #d9d5d5;
}

#primary-content .shopping-cart td.center, #primary-content .shopping-cart td input
{
    text-align: center;
}

#primary-content .shopping-cart td.right
{
    text-align: right;
}

#primary-content .shopping-cart .delete
{
    background: url(../Images/Icons/Delete.png) no-repeat center;
    color: transparent;
}

#primary-content .shopping-cart .buttons
{
    float: right;
    background-color: #808080;
    margin-left: 10px;
    color: white;
    text-decoration: none;
    padding: 5px;
    border: 2px solid white;
}

#primary-content .shopping-cart br
{
    clear: both;
}

#primary-content .register fieldset
{
    margin: 10px;
}

#primary-content .register legend
{
    text-align: left;
}

#primary-content .register table
{
    border-collapse: collapse;
    width: 664px;
}

/* Product */
#product
{
    width: 181.5px;
    height: 200px;
    float: left;
    text-align: center;
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
    color: #808080;
    border-left: dashed 1px #cac7c7;
    border-right: dashed 1px #cac7c7;
    border-bottom: dashed 1px #cac7c7;
    padding-top: 20px;
}

/* Product Name, Details and AddToCart */
#product a
{
    text-transform: uppercase;
    text-decoration: none;
}

#product .new-product
{
    display: inline-table;
    width: 170px;
    background-image: url(../Images/Icons/New.gif);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 40px 40px;
}

#product span
{
    color: red;
}

#product span.old-price
{
    text-decoration: line-through;
}

/* add-to-cart button */
#product .add-to-cart
{
    display: inline-table;
    text-transform: none;
	background-image: url("../Images/Icons/Order.png");
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 27px;
    font-weight: normal;
    color: black;
    line-height: 24px;
    height: 24px;
}

/* Details of a product */
#product .details
{
	margin-left: 10px;
    font-weight: normal;
    text-transform: none;
    background-image: url("../Images/Icons/Details.png");
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 10px;
}

.tooltip-title
{
    font-weight: bold;
    font-size: 13px;
    color: blue;
}

.tooltip-content
{
    padding-left: 20px;
}

/* Form Label */
.editor-label
{
	clear: both;
	float: left;
	width: 250px;
	text-align: right;
	margin-top: -4px;
    margin-right: 10px;
}

/* From Textbox */
.editor-field
{
	float: left;
	width: 200px;
    margin: 0;
}

/* From Checkbox */
.editor-checkbox
{
	float: left;
    margin: 0;
    width: 20px;
    height: 20px;
}

.field-validation-error
{
	clear: both;
    text-align: left;
    color: red;
    margin-left: 129.5px;
    margin-bottom: 10px;
}

.required
{
    margin-left: -100px;
}

.display-label
{
    margin-top: 10px;
}

/* Footer section */
#footer
{
    width: 950px;
    height: 170px;
    float: left;
    clear: both;
    background: #042663;
    margin-top: 20px;
    color: white;
    border-top: 3px solid #6479A0;
}

#footer ul
{
    list-style-type: none;
    margin: 0;
    padding-left: 20px;
    padding-top: 10px;
}

#footer ul li
{
    display: inline;
}

#footer ul li a
{
    text-decoration: none;
    color: white;
}

#footer ul li a:hover
{
    color: red;
}

#footer hr
{
    width: 503px;
    margin-left: 20px;
    margin-top: 0;
}

#footer div
{
    float: left;
    margin-left: 20px;
}

#footer div:last-child
{
    float: right;
    margin-right: 20px;
    margin-top: 46px;
    text-align: right;
}

#footer div:last-child p
{
    color: white;
    font-weight: normal;
}

#footer p
{
    font-weight: bold;
    color: yellow;
}

#footer a
{
    color: yellow;
    text-decoration: none;
}